<template>
  <div>
    <van-form @submit="onSubmit">
      <van-field
        v-model="mobile"
        name="mobile"
        label="手机号"
        placeholder="手机号"
        :rules="[{ required: true, message: '请填写手机号' }]"
      />
      <van-field
        v-model="code"
        name="code"
        label="验证码"
        placeholder="验证码"
        :rules="[{ required: true, message: '请填写手机验证码' }]"
      />
      <van-button @click="sendSms" v-model='code' :disabled="flag">{{mes}}</van-button>
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
export default {
  name: "admin_user",
  data(){
    return{
      mobile:'',
      mes:'发送验证码',
      code:'',
      time:60,
      flag:false,
    }
  },
  methods:{
    //手机号
    onSubmit(){
      let sjh = /^1[3-9]\d{9}$/
      if(!sjh.test(this.mobile)){
        this.$toast('请输入正确格式的手机号');
        return false
      }
      this.$axios.post('admin/yzmM',{'mobile':this.mobile,'code':this.code}).then(res=>{
        if(res.data.code==200){
          this.$toast('登录成功')
          localStorage.setItem('token',res.data.j)
        }else {
          this.$toast(res.data.mes)
        }
      })
    },
    //验证码
    sendSms(){
      this.$axios.post('admin/sendsms?mobile='+this.mobile).then(res=>{
        if(res.data.code == 200){
          let m = setInterval(()=>{
            this.time--
            this.flag = true
            this.mes = this.time + '后重新获取验证码'
            //时间结束后需要变成可以获取验证码的状态  所有参数回复原装
            if(this.time==0){
              clearInterval(m)
              this.time=60
              this.flag = false
              this.mes = '发送验证码'
            }
          },1000)
        }
        else{
          this.$toast(res.data.mes);
          return false
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
